<template>
  <div :class="$style.wrapper">
    <div>
      <a-space>
        <div v-if="itemData.from">
          <a-avatar :size="30" :src="itemData.from.icon" />
        </div>
        <div style="line-height: 15px">
          <div :class="$style.name">{{ itemData.from.name }}</div>
          <div :class="$style.time">
            {{ useFormatTime(itemData.created_time) }}
          </div>
        </div>
      </a-space>
    </div>
    <div :class="$style.text">
      {{ itemData.content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFormatTime } from '@/utils/hooks';

defineProps({
  itemData: {
    type: Object,
    required: true,
  },
});
</script>

<style module lang="less">
.wrapper {
  .time {
    color: #939393;
    font-size: 13px;
  }
  .text {
    width: 400px;
    margin-left: 38px;
  }
}
</style>
